<template>
    <div class="swiper_wrap">
        <swiper :options="mySwiperOption">
            <swiper-slide v-for="i in swiperList" :key="i">
                <div class="video-swiper">
                    <video
                        width="100%"
                        height="100%"
                        style="object-fit: cover"
                        muted="true"
                        autoplay
                    >
                        <source
                            src="../../assets/video/senmenti0-detail.mp4"
                            type="video/mp4"
                        />
                        您的浏览器不支持查看视频
                    </video>
                    <template v-if="videoTextShow">
                        <div
                            class="text left-head"
                            :class="handleAnimate(1, 'fadeInLeft')"
                        >
                            <img
                                style="width: 338px; height: 45px"
                                :src="getDetailSrc('title_0')"
                                alt=""
                            />
                        </div>
                        <div
                            class="text left-head fz31"
                            :class="handleAnimate(1, 'fadeInLeft')"
                        >
                            <!-- {{ $t('no.p1.m2') }} -->
                            {{ $t("no.p1.m1") }}
                        </div>
                        <div
                            class="text left-desc"
                            :class="handleAnimate(1, 'fadeInLeft')"
                        >
                            <div>
                                {{ $t("no.p1.m3") }}
                            </div>
                            <div style="margin-top: 5px">
                                {{ $t("no.p1.m3_1") }}
                            </div>
                        </div>
                        <div
                            class="color-block"
                            :class="handleAnimate(1, 'fadeInLeft')"
                        ></div>
                        <div
                            class="text left-desc mt23"
                            :class="handleAnimate(1, 'fadeInLeft')"
                        >
                            {{ $t("no.p1.m4") }}
                        </div>
                        <div
                            class="text left-desc mt12"
                            :class="handleAnimate(1, 'fadeInLeft')"
                        >
                            {{ $t("no.p1.m5") }}
                        </div>
                        <div
                            class="page1-btn-group text"
                            :class="handleAnimate(1, 'fadeInLeft')"
                        >
                            <img
                                class="color-arrow"
                                @click="routerChange('buy_0')"
                                :src="getDetailSrc('color-arrow')"
                                alt=""
                            />
                            <div
                                class="btn-text"
                                @click="routerChange('buy_0')"
                            >
                                {{ $t(/*即刻订购*/ "no.p6.m5") }}
                            </div>
                            <img
                                class="color-arrow"
                                @click="routerChange('test-drive')"
                                :src="getDetailSrc('color-arrow')"
                                alt=""
                            />
                            <div
                                class="btn-text"
                                @click="routerChange('test-drive')"
                            >
                                {{ $t(/*预约试驾*/ "no.p6.m4") }}
                            </div>
                        </div>
                    </template>
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
    components: {
        // 注册 vue-awesome-swiper 组件
        swiper,
        swiperSlide,
    },
    props: {
        mySwiperOption: {
            type: Object,
            default: {
                pagination: {
                    el: ".swiper-pagination", //与slot="pagination"处 class 一致
                    clickable: true, //轮播按钮支持点击
                },
                //自动播放
                autoplay: {
                    delay: 1000,
                    disableOnInteraction: false,
                },
                //循环
                loop: true,
            },
        },
        swiperList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            videoTextShow: false,
        };
    },
};
</script>
